<template>
  <div class="buttonAdd">
    <el-dialog :close-on-click-modal="false" :append-to-body="true" title="短信通知" :visible.sync="dialogFormVisibleAdd"
               @opened="$store.commit('dialogTop')" @close="resetForm('ruleFormAdd')">
      <el-form :model="ruleFormAdd" :rules="rulesAdd" ref="ruleFormAdd" label-width="80px" class="demo-ruleForm">
        <el-form-item label="通知人" prop="persons" :rules="[{ 'required':true, 'message': '请选择通知人','trigger': 'blur' }]">
          <el-input style="cursor: pointer;" clearable readonly size="mini" v-model="ruleFormAdd.persons"
                    auto-complete="off" placeholder="通知人"></el-input>
        </el-form-item>
        <el-form-item>
          <el-tree
            ref="tree"
            :data="rows"
            show-checkbox
            @node-expand="handleNodeClick"
            @check-change="getUserIds"
            node-key="id"
            accordion
            :highlight-current="false"
            :props="defaultProps">
          </el-tree>
        </el-form-item>

        <el-form-item label="通知标题" prop="pushTitle"
                      :rules="[{ 'required':true, 'message': '请输入通知标题','trigger': 'blur' }]">
          <el-input clearable size="mini" v-model="ruleFormAdd.pushTitle" auto-complete="off"
                    placeholder="通知标题"></el-input>
        </el-form-item>
        <el-form-item label="通知内容" prop="pushContent"
                      :rules="[{ 'required':true, 'message': '请输入通知内容', 'trigger': 'blur' }]">
          <el-input
            type="textarea"
            :rows="3"
            :maxlength="70"
            placeholder="通知内容"
            v-model="ruleFormAdd.pushContent">
          </el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center;margin-bottom: 8px;margin-top: 18px;">
        <el-button type="primary" size="small" @click="submitForm('ruleFormAdd')">提 交</el-button>
        <el-button size="small" @click="dialogFormVisibleAdd = false">取 消</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>

  export default {
    props: [],
    data () {
      return {
        ruleFormAdd: {
          "userIds": [],
          persons: "",
          pushTitle: "",
          "pushContent": "",
        },
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        rows: [],
        userIds: [],
        multipleSelection: [],
        dialogFormVisibleAdd: false,
        rulesAdd: {}
      }
    },
    created(){

    },
    methods: {
      getUserIds(){
        let arr = [],arr2=[]
        this.ruleFormAdd.userIds = []
        this.$refs.tree.getCheckedNodes().forEach(item => {
          if (!item.children) {
           arr2.push(item.id)
            arr.push(item.name)
          }
        })
        this.ruleFormAdd.userIds=arr2
        this.ruleFormAdd.persons = arr.join(",")
      },
      dialogOpen(){
        //查询所有人员
        this.axios.post(process.env.API_HOST + "/enterprise/selectSafeUserList", {})
          .then(response => {
            const result = response.data
            if (response.data.code === 200) {
              result.result.forEach((item, index) => {
                if (item.regionList.length > 0) {
                  this.rows[index] = {
                    name: item.enterpriseName,
                    id: index,
                    children: []
                  }
                  item.regionList.forEach((item1, key) => {
                    if (item1.userList.length > 0) {
                      this.rows[index].children[key] = {
                        name: item1.regionName,
                        id: item1.regionId,
                        children: []
                      }
                      item1.userList.forEach(item2 => {
                        this.rows[index].children[key].children.push({
                          name: item2.userName,
                          id: item2.id,
                        })
                      })
                    }

                  })
                }
              })
              this.rows = this.rows.filter((item, index) => {
                item.children = item.children.filter(item1 => {
                  return item1
                })
                return item && item.children.length > 0;
              })
              this.dialogFormVisibleAdd = true
            }
          })

      },
      handleNodeClick(data) {
        setTimeout(() => {
          this.$store.commit('dialogTop')
        }, 500)
      },
      //提交回调
      handleDiaSureAdd(){
        this.axios.post(process.env.API_HOST + '/enterprise/notifyMessage', this.ruleFormAdd)
          .then(response => {
            let result = response.data
            if (result.code == 200) {
              this.$message({
                type: 'success',
                message: '发送成功!'
              });
              this.dialogFormVisibleAdd = false
              this.$emit('searchRowsInfo')
              this.resetForm('ruleFormAdd')
            }

          })
          .catch(error => {
            console.log(error);
          });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.handleDiaSureAdd()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .buttonAdd
    display inline-block
    margin-left 10px
</style>
